<template>
  <basic-container>
    <avue-form ref="form" :option="formOption" v-model="form" @submit="handleSubmit">
      <template slot="menuForm">
        <el-button icon="el-icon-circle-close" @click="handleCancel">取消</el-button>
      </template>
    </avue-form>
  </basic-container>
</template>

<script>
  import { info, saveConfig } from "@/api/oss/oss";

  export default {
    data() {
      return {
        form: {},
        formOption: {
          tabs: false,
          emptyBtn: false,
          detail: false,
          disabled: false, 
          labelWidth: 150,
          labelPosition: 'right',
          submitBtn: true,
          submitText: '保存',
          column: [
            {
              label: "类型",
              prop: "title",
              type: "radio",
              span: 24,
              dicData: [{
                  label: '阿里云',
                  value: 1
              }, {
                  label: '腾讯云',
                  value: 2
              }],
              rules: [{
                required: true,
                message: "请选择类型",
                trigger: "blur"
              }]
            },
            {
              label: "域名",
              prop: "aliyunDomain",
              placeholder: "阿里云绑定的域名",
              span: 24,
              rules: [{
                required: true,
                message: "请输入域名",
                trigger: "blur"
              }]
            },
            {
              label: "路径前缀",
              prop: "aliyunPrefix",
              placeholder: "不设置默认为空",
              span: 24,
            },
            {
              label: "EndPoint",
              prop: "aliyunEndPoint",
              placeholder: "阿里云EndPoint",
              span: 24,
              rules: [{
                required: true,
                message: "请输入阿里云EndPoint",
                trigger: "blur"
              }]
            },
            {
              label: "AccessKeyId",
              prop: "aliyunAccessKeyId",
              placeholder: "阿里云AccessKeyId",
              span: 24,
              rules: [{
                required: true,
                message: "请输入阿里云AccessKeyId",
                trigger: "blur"
              }]
            },
            {
              label: "AccessKeySecret",
              prop: "aliyunAccessKeySecret",
              placeholder: "阿里云AccessKeySecret",
              span: 24,
              rules: [{
                required: true,
                message: "请输入阿里云AccessKeySecret",
                trigger: "blur"
              }]
            },
            {
              label: "BucketName",
              prop: "aliyunBucketName",
              placeholder: "阿里云BucketName",
              span: 24,
              rules: [{
                required: true,
                message: "请输入阿里云BucketName",
                trigger: "blur"
              }]
            },
          ]
        },
      };
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        info().then(response => {
          this.form = response.data;
        });
      },
      handleSubmit(form, done, loading){
        saveConfig(form).then(response => {
          this.$message.success('保存成功');
          done();
          this.$parent.handleClose();
        });
      },
      handleCancel() {
        this.$parent.handleClose();
      },
    }
  };
</script>

<style>
</style>
